<template>
	<view class="order-confirm">
		<view class="select-address flex-center-between" @click="pageTo('address')">
			<image class="select-address-img" src="../../static/images/order-location.png" mode="aspectFill"></image>
			<view class="select-address-info" v-if="Object.keys(addressData).length !== 0">
				<view>
					<text class="select-address-info-name">{{addressData.addressName}}</text>
					<text class="select-address-info-mobile">{{addressData.addressPhone}}</text>
				</view>
				<view class="select-address-info-address text-overflow-two">
					{{addressData.addressArea}}
				</view>
			</view>
			<view class="select-address-info" v-if="Object.keys(addressData).length === 0">
				请选择收货地址
			</view>
			<uni-icon type="arrowright" color="#999" size="20"></uni-icon>
		</view>

		<view class="select-goods">
			<view class="flex-center">
				<image class="select-goods-img" :src="goodsImage" mode="aspectFill"></image>
				<view class="select-goods-info">
					<view class="select-goods-info-name text-overflow-two">
						{{goodsName}}
					</view>
					<view class="select-goods-info-type text-overflow-one">
						型号：{{goodsType}}
					</view>
				</view>
			</view>
			<view class="select-goods-number flex-center-between">
				<text>购买数量</text>
				<uni-number-box min="1" :max="goodsMaxNum" :value="goodsNum" @change="changeGoodsNum">
				</uni-number-box>
			</view>
			<view class="select-goods-price">
				<view class="price">
					<!-- <view>
						<text>维护费：</text>
						<text>¥{{goodsServerPrice}}</text>
					</view> -->
					<view>
						<text>租赁费：</text>
						<text>¥{{goodsPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 		<view class="" style="display: flex;justify-content: space-between;">
			<text style="font-size: 34rpx;">100.00</text>
			<text style="font-size: 34rpx;">2020-08-12 15:16:02</text>
		</view> -->
		<view class="recom-code">
			<view class="recom-code-item flex-center-between" @click="open">
				<view class="code">优惠券</view>
				<view v-if="user_coupon" class="color-important">-¥{{user_coupon.coupon.rule.discount / 100}}
					<uni-icon type="arrowright" color="#999" size="20"></uni-icon>
				</view>
				<uni-icon v-else type="arrowright" color="#999" size="20"></uni-icon>
			</view>
		</view>
		<!-- <view class="recom-code">
			<view class="recom-code-item flex-center-between">
				<view class="code">推荐码</view>
				<input
					class="code-input"
					type="number"
					:value="recomCode"
					placeholder="请输入推荐码"
					@input="e=>{recomCode = e.detail.value}" />
			</view>
		</view> -->

		<view class="pay-select">
			<!-- <view class="pay-select-item flex-center-between" @click="certificationOrNot('invoice')">
				<text>是否开具发票</text>
				<view class="invoice">
					<text>
						{{invoiceData.invoiceId === 0 ? '否' : (invoiceData.invoiceTpye+'('+invoiceData.invoiceObject+')')}}
					</text>
					<uni-icon type="arrowright" color="#999" size="20"></uni-icon>
				</view>
				
			</view> -->
			<view class="pay-select-item flex-center-between" @click="certificationOrNot('contract')">
				<text>是否签订合同</text>
				<view class="flex-center">
					<view class="contract text-overflow-one">
						{{contractData.contractId === 0 ? '否' : contractData.contractPartyA}}
					</view>
					<uni-icon type="arrowright" color="#999" size="20"></uni-icon>
				</view>
			</view>
		</view>

		<view class="agreement">
			<checkbox-group class="checkbox-group" @change="checkboxChange">
				<label>
					<checkbox value="1" :checked="agree" />我已阅读并同意
				</label>
			</checkbox-group>
			<text class="color-important" @click="pageTo('agreement?type=1')">《服务协议》</text>
		</view>

		<view class="order-submit flex-center-between">
			<view class="order-submit-price">
				<text>合计</text>
				<text class="text-color-important">
					<text>￥</text>
					<text class="font-size-lg color-important">{{totalMoney}}</text>
				</text>
			</view>
			<button class="order-submit-confirm" @click="submitOrder">
				提交订单
			</button>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popup-container">
				<view class="coupon-list-title">
					<text>优惠券列表</text>
				</view>
				<view v-if="couponList.length > 0" class="coupon-list">
					<radio-group @change="radioChange">
						<view class="list-item red-bg" v-for="(item,index) in couponList" :key="index">
							<view class="list-item-main flex-center-between">
								<view class="list-item-main-left">
									<view class="list-item-main-left-title">
										<text class="list-item-main-left-symbol">¥</text>
										{{item.coupon.rule.discount/100}}
									</view>
									<!-- <view class="list-item-main-left-desc">{{item.desc}}</view> -->
									<view class="list-item-main-left-desc">全场通用</view>
								</view>
								<view class="list-item-main-right">
									<view class="name-price-amount flex-center-between">
										<view class="list-item-main-right-title">{{item.coupon.title}}</view>
									</view>
									<view class="list-item-main-right-desc">有效期至:{{item.expiretime_text}}</view>

								</view>
								<view class="radio-box">
									<radio :value="item.coupon_id" :checked="item.checked" />
								</view>
							</view>
						</view>
					</radio-group>
				</view>
				<view v-else class="no-data">
					<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
					暂无优惠券！
				</view>
				<view class="popup-bottom">
					<button @click="notUseCoupon">不使用优惠券</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box.vue"
	import uniIcon from "@/components/uni-icon.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniNumberBox,
			uniIcon,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				goodsId: null,
				goodsImage: null,
				goodsName: null,
				goodsType: null,
				goodsNum: null,
				goodsMaxNum: null,
				goodsPrice: null,
				goodsPriceId: null,
				goodsServerPrice: null,
				addressData: {},
				contractData: {
					contractId: 0
				},
				invoiceData: {
					invoiceId: 0
				},
				recomCode: '',
				agree: false,
				isCertification: false,
				user_coupon: null,
				couponList: [],
			}
		},
		computed: {
			/**
			 * 计算总金额
			 */
			totalMoney: function() {
				return this.goodsNum * this.goodsPrice + this.goodsServerPrice - (this.user_coupon ? this.user_coupon.coupon.rule.discount /
					100 : 0)
			}
		},
		onLoad(option) {
			// 从路由中获取到商品到各项数据
			// console.log(option)
			this.goodsId = option.goodsId
			this.goodsImage = option.goodsImage
			this.goodsName = option.goodsName
			this.goodsType = option.goodsType
			this.goodsPriceId = option.goodsPriceId
			this.goodsNum = parseInt(option.goodsNum)
			this.goodsMaxNum = parseInt(option.goodsMaxNum)
			this.goodsServerPrice = parseFloat(option.goodsServerPrice)
			this.goodsPrice = parseFloat(option.goodsPrice)
			uni.removeStorageSync('CONTRACT')
			uni.removeStorageSync('INVOICE')
			this.getCertifStatus()
			this.gatCouponList();
		},
		onShow() {
			this.getSelectedAddress()
			this.getInvoiceData()
			this.getContractData()
		},
		methods: {
			/**
			 * 提交订单
			 */
			async submitOrder() {
				if (!this.addressData.addressId) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
					return
				}
				if (!this.agree) {
					uni.showToast({
						title: '请先阅读并同意服务协议',
						icon: 'none'
					})
					return
				}
				let body = {
					products: [{
						pro_id: this.goodsId,
						quantity: this.goodsNum,
						spec_id: this.goodsPriceId,
					}],
					address_id: this.addressData.addressId,
					invoice_id: this.invoiceData.invoiceId,
					contract_id: this.contractData.contractId,
					recommend: this.recomCode === '' ? 0 : this.recomCode,
					total: this.totalMoney,
					coupon_id: this.user_coupon ? this.user_coupon.id : 0
				}
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/submit',
					data: body
				})
				if (res.status === 1) {
					uni.removeStorageSync('COUPON')
					this.pageTo('pay?orderNum=' + res.data.order_no + '&orderMoney=' + res.data.orig_price + '&couponMoney=' + res.data
						.coupon_price)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 获取企业认证状态
			 */
			async getCertifStatus() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/my',
					data: {}
				})
				if (res.status === 1) {
					this.isCertification = res.data.status === 1 ? true : false
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 获取地址数据
			 */
			getSelectedAddress() {
				uni.getStorage({
					key: 'ADDRESS',
					success: res => {
						this.addressData = res.data
					},
					fail: res => {
						this.addressData = {};
					}
				})
			},
			/**
			 * 获取合同数据
			 */
			getContractData() {
				try {
					const value = uni.getStorageSync('CONTRACT');
					if (value) {
						this.contractData = value
					}
				} catch (e) {
					// error
				}
			},
			/**
			 * 获取发票数据
			 */
			getInvoiceData() {
				try {
					const value = uni.getStorageSync('INVOICE');
					if (value) {
						this.invoiceData = value
					}
				} catch (e) {
					// error
				}
			},
			/**
			 * 更改商品数量
			 * @param {Number} e
			 */
			changeGoodsNum(e) {
				// console.log(e)
				this.goodsNum = e
			},
			/**
			 * 企业认证
			 * @param {String} page
			 */
			certificationOrNot(page) {
				if (this.isCertification) {
					this.pageTo(page)
				} else {
					uni.showModal({
						title: '企业认证',
						content: '您未通过企业实名认证，认证成功后即可进行开票和签订合同功能',
						cancelText: '暂不认证',
						confirmText: '立即认证',
						success: (res) => {
							if (res.confirm) {
								this.pageTo('/pages/user/userCertification')
							}
						}
					});
				}
			},

			/**
			 * 同意or不同意协议
			 * @param {Object} e
			 */
			checkboxChange(e) {
				this.agree = e.detail.value[0] ? true : false
			},

			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 获取优惠券列表数据
			 */
			async gatCouponList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/coupon/list',
					data: {
						// page: 1,
						// row: 6,
						coupon_status: 1
					}
				})
				if (res.code == 1) {
					this.couponList = res.data.map(item => {
						item.checked = false;
						return item
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			radioChange(evt) {
				console.log(evt)
				this.close();
				this.couponList.map((item) => {
					if (item.coupon_id == evt.target.value) {
						item.checked = true;
						this.user_coupon = item;
					}
				})
				console.log(this.user_coupon)
			},
			notUseCoupon() {
				this.user_coupon = null;
				this.couponList.map((item) => {
					if (item.checked) {
						item.checked = false;
					}
				})
				this.close();
			}
		}
	}
</script>

<style lang="scss">
	.order-confirm {
		margin-bottom: 106rpx;

		.select-address {
			box-sizing: border-box;
			width: 690rpx;
			margin: 20rpx 30rpx;
			padding: 20rpx;
			background: $uni-bg-color;
			border-radius: $uni-border-radius-base;

			&-info {
				margin: 0 30rpx;
				width: 450rpx;

				&-mobile {
					margin-left: 20rpx;
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm2;
				}

				&-address {
					width: 450rpx;
					font-size: $uni-font-size-sm2;
				}
			}

			&-img {
				height: 68rpx;
				width: 68rpx;
				border-radius: 50%;
			}
		}

		.select-goods {
			box-sizing: border-box;
			width: 690rpx;
			margin: 20rpx 30rpx;
			padding: 30rpx 20rpx;
			background: $uni-bg-color;
			border-radius: $uni-border-radius-base;

			&-img {
				width: 200rpx;
				height: 200rpx;
			}

			&-info {
				margin-left: 20rpx;
				width: 470rpx;

				&-name {
					margin-bottom: 40rpx;
				}

				&-type {
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm2;
				}
			}

			.select-goods-number {
				margin: 20rpx 0;
			}

			.select-goods-price {
				padding-top: 20rpx;
				border-top: 1rpx solid $uni-border-color;

				.price {
					font-size: $uni-font-size-sm2;
				}
			}
		}

		.recom-code {
			margin: 20rpx 30rpx;
			padding: 0 30rpx;
			background: $uni-bg-color;
			border-radius: $uni-border-radius-base;

			.recom-code-item {
				height: 110rpx;
				border-bottom: 1rpx solid $uni-border-color;

				&:last-child {
					border-bottom: none;
				}

				.code {
					width: 120rpx;
				}

				.code-input {
					text-align: right;
				}
			}
		}

		.pay-select {
			margin: 20rpx 30rpx;
			padding: 0 30rpx;
			background: $uni-bg-color;
			border-radius: $uni-border-radius-base;

			&-item {
				height: 110rpx;
				border-bottom: 1rpx solid $uni-border-color;

				&:last-child {
					border-bottom: none;
				}

				.contract {
					width: 240rpx;
					text-align: right;
				}
			}
		}

		.agreement {
			text-align: right;
			line-height: 100rpx;
			margin-right: 30rpx;
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm;

			.checkbox-group {
				display: inline-block;
			}
		}

		.order-submit {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 106rpx;
			border-top: 1rpx solid $uni-border-color;
			background: $uni-bg-color;

			.order-submit-price {
				flex-grow: 1;
				margin-left: 50rpx;
			}

			.order-submit-confirm {
				width: 238rpx;
				height: 106rpx;
				line-height: 106rpx;
				text-align: center;
				font-size: $uni-font-size-base;
				border-radius: 0;
				border: none;
				color: $uni-text-color-inverse;
				background: $uni-color-theme;
			}
		}
	}

	.popup-container {
		background-color: #f7f8fa;
		width: 100%;
		height: 88vh;
		overflow: auto;
		border-radius: 20rpx 20rpx 0 0;

		.coupon-list-title {
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			text-align: center;
			line-height: 100rpx;
			font-size: 34rpx;
			position: sticky;
			top: 0;
			z-index: 999;
		}

		.coupon-list {
			padding: 30rpx;
			margin-bottom: 100rpx;

			.list-item {
				background-color: #FFFFFF;
				background-image: url('../../static/images/coupon-used-bg.png');
				box-sizing: border-box;
				margin-bottom: 30rpx;
				// padding: 30rpx;
				background-size: 670rpx 200rpx;
				background-repeat: no-repeat;

				// background: $uni-bg-color;
				// border-radius: $uni-border-radius-base;
				&-top {
					.number {
						font-size: $uni-font-size-sm2;
						border-radius: $uni-border-radius-base;
					}

					.status {
						line-height: 36rpx;
						padding: 0 10rpx;
						color: $uni-text-color-inverse;
						font-size: $uni-font-size-sm1;
					}

					.status-1,
					.status-2,
					.status-3 {
						background: #ff9c00;
					}

					.status-4 {
						background: #00b5c4;
					}
				}

				&-main {

					// margin: 20rpx 0;
					&-left {
						width: 200rpx;
						padding: 20rpx 0;
						color: #ffffff;
						text-align: center;

						&-title {
							font-size: 60rpx;
						}

						&-desc {
							font-size: 22rpx;
						}

						&-symbol {
							font-size: 30rpx;
						}
					}

					.radio-box {
						margin-right: 20rpx;
					}

					&-right {

						// width: 460rpx;
						.name-price-amount {

							// margin-bottom: 30rpx;
							.name {
								width: 300rpx;
							}

							.price,
							.amount {
								font-size: $uni-font-size-sm2;
								color: $uni-text-color-grey;
								text-align: right;
							}
						}

						.type,
						.daterange {
							font-size: $uni-font-size-sm1;
						}

						&-title {
							font-size: 36rpx;
						}

						&-desc {
							font-size: 24rpx;
							color: #999999;
						}

						&-img {
							width: 162rpx;
							height: 122rpx;
							background-size: 162rpx 122rpx;
							background-repeat: no-repeat;
							margin-left: 240rpx;
							margin-top: -80rpx;
						}

						&-button {
							font-size: 22rpx;
							width: 150rpx;
							border-radius: 50rpx;
							border: 0;
							color: #ffffff;
							padding: 0 !important;
							line-height: 2.3;
							margin-left: 250rpx;
							background: linear-gradient(-67deg, rgba(255, 71, 69, 1), rgba(255, 116, 85, 1));
						}

						button::after {
							border: 0;
						}
					}
				}

				&-bottom {
					text-align: right;

					.amount {
						margin-right: 54rpx;
					}

					.btn {
						display: inline-block;
						line-height: 56rpx;
						margin: 30rpx 0 0 20rpx;
						padding: 0 28rpx;
						border-radius: 28rpx;
						font-size: $uni-font-size-sm2;
						border: 1rpx solid $uni-border-color;
					}
				}
			}
		}

		.popup-bottom {
			padding: 30rpx;
			background-color: #ffffff;
			position: absolute;
			width: 750rpx;
			box-sizing: border-box;
			bottom: 0;
			left: 0;
			z-index: 99;

			button {
				height: 95rpx;
				line-height: 95rpx;
				font-size: $uni-font-size-lg1;
				color: $uni-text-color-inverse;
				background-color: $uni-color-theme;
				border-radius: $uni-border-radius-lg;
			}
		}
	}
</style>
